<script lang="ts">
  import { Icon } from "@component/icons";
  import { user$ } from "@store/entity/User";
  import { canAddDataset$, userDatasets$, type Dataset } from "@store/entity/dataset";
  import DatasetDetailModal from "@routes/(authorized)/dataset/DatasetDetailModal.svelte";

  let modal: DatasetDetailModal;

  function createNewDataset() {
    modal.show();
  }
</script>

<div class="w-full h-full">
  <ul
    class="w-full h-full flex p-8 justify-start items-start space-x-8 bg-[#1E1E1E]"
  >
    <li>
      <button
        class="flex-center-box flex-center-box w-48 h-48 border bar-border-light shadow-xl cursor-pointer disabled:item-disable"
        disabled={!$canAddDataset$}
        on:click={createNewDataset}><Icon name="plus" size="lg" /></button
      >
    </li>
    {#each $userDatasets$ as dataset, idx (dataset.id)}
      <li class="flex-container flex-col w-48 h-60 relative">
        <!-- svelte-ignore a11y-missing-attribute -->
        <a
          class="w-full block relative cursor-pointer"
          href="/dataset/{dataset.code}/overview"
        >
          <div
            class="flex-center-box w-full h-48 border bar-border-light text-6xl shadow-xl text-center rounded-full bg-green-800 text-gray-200"
          >
            {dataset.name.substring(0, 1)}
          </div>
        </a>
        {#if dataset.user_id === $user$.id }
          <div class="flex-container flex-row w-full h-8">
            {dataset.name}
            <!-- svelte-ignore a11y-missing-attribute -->
            <!-- svelte-ignore missing-declaration -->
            <!-- svelte-ignore a11y-click-events-have-key-events -->
            <a
            on:click={()=>{modal.show(dataset)}}
              title="修改数据集基本信息"
              class="cursor-pointer ml-2"><Icon name="pencil-alt" size="sm+" /></a
            >
          </div>
          <div class="absolute text-red-500 rounded-sm right-0 top-0" title="所有者标记"><Icon name="cube" size="md" /></div>
        {:else}
          <div class="absolute text-gray-500 rounded-sm right-0 top-0" title="参与者标记"><Icon name="user-group" size="md" /></div>
        {/if}
      </li>
    {/each}
  </ul>
  <DatasetDetailModal bind:this={modal} />
</div>
